import QueueAnim from 'rc-queue-anim';
import { Row, Col, Button } from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import { LogButton } from './utils';

function FlashCenter(props) {
  const { ...tagProps } = props;
  const { dataSource, isMobile } = tagProps;
  delete tagProps.dataSource;
  delete tagProps.isMobile;
  const animType = {
    queue: isMobile ? 'bottom' : 'left',
    queue2: 'right',
    one: isMobile
      ? {
        scaleY: '+=0.3',
        opacity: 0,
        type: 'from',
        ease: 'easeOutQuad',
      }
      : {
        x: '+=30',
        opacity: 1,
        type: 'from',
        ease: 'easeOutQuad'
      },
  };
  const img = (
    <QueueAnim
      type={animType.queue2}
      key="img"
      leaveReverse
      animConfig={{ opacity: [1, 0], translateX: [0, 400] }}
      ease={['easeOutCubic', 'easeInCubic']}
      {...dataSource.textWrapper}
      component={Col}
      componentProps={{
        md: dataSource.textWrapper.md,
        xs: dataSource.textWrapper.xs,
      }}
    >
      <div
        key="img2"
        className='img'
      >
        <span {...dataSource.img}>
          <img src={dataSource.img.children} width="100%" alt="img" />
        </span>
      </div>


    </QueueAnim>
  );
  return (
    <div {...tagProps} {...dataSource.wrapper}>
      <OverPack {...dataSource.OverPack} component={Row}>
        <QueueAnim
          type={animType.queue}
          animConfig={{ opacity: [1, 0], translateX: [0, -400] }}
          leaveReverse
          ease={['easeOutCubic', 'easeInCubic']}
          {...dataSource.textWrapper}
          component={Col}
          componentProps={{
            md: dataSource.textWrapper.md,
            xs: dataSource.textWrapper.xs,
          }}
        >

          <div key="text">
            <h2 key="h1" {...dataSource.title}>
              {dataSource.title.children}
            </h2>
            <div key="p" {...dataSource.content}>
              {dataSource.content.children}
            </div>
            <div key="b" className='flash_download' >
              <LogButton
                type="primary"
                shape="round"
                softName="flash_center.exe"
                className="button log_button"
              >
                下载
              </LogButton>
            </div>
          </div>
        </QueueAnim>
        {img}
      </OverPack>
    </div>
  );
}

export default FlashCenter;
